<template>
  <div id="home_edit head">
    <el-container>
      <el-header class="head">
        <el-page-header @back="goBack" content="感想编辑" />
      </el-header>
      <el-main>
        <div class="flex">
          <span class="supText">标题</span>
          <el-input placeholder="请输入标题" v-model="title" clearable />
        </div>
        <div style="margin: 20px 0"></div>
        <div class="flex">
          <span class="supText">标签</span>
          <el-select
            v-model="selectVal"
            allow-create
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词（选填）"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.phone_name"
              :value="item.phone_name"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin: 20px 0"></div>
        <div class="flex">
          <span class="supText">文本</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10 }"
            placeholder="请输入内容"
            v-model="content"
            clearable
          />
        </div>
        <div style="margin: 20px 0"></div>
        <div class="flex">
          <el-button class="btn" @click="release">发布</el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "home_edit",
  data() {
    return {
      title: "",
      selectVal: "",
      content: "",

      // 快速手机相关
      loading: false,
      options: [],
      phoneName: null,
      phonedetail: null,
    };
  },
  mounted() {},
  methods: {
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        await axios({
          method: "get",
          headers: {
            Authorization: this.$store.state.token,
          },
          timeout: 2000,
          url: "http://localhost:8081/api/brand/fuzzy",
          params: {
            fuzzyVal: query,
          },
        })
          .then((res) => {
            this.loading = false;
            this.options = res.data.data;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    async release() {
      await axios({
        method: "post",
        headers: {
          Authorization: this.$store.state.token,
        },
        timeout: 2000,
        url: "http://localhost:8081/my/article/add",
        params: {
          // username: this.$store.state.username,
          content: this.content,
          title: this.title,
          cate: "" + this.selectVal.join(","),
        },
      })
        .then((res) => {
          if (res.data.status == 0) {
            this.$message({
              type: "success",
              message: "发布成功",
            });
            this.$router.push("/home/square");
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    goBack() {
      if (
        this.title.trim() != "" ||
        this.content.trim() != "" ||
        this.selectVal.length
      ) {
        this.$confirm("此操作将删除已编辑内容, 是否继续?", "警告", {
          confirmButtonText: "确认返回",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$router.push("/home");
        });
      } else {
        this.$router.push("/home");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
}
.head {
  padding: 20px;
}
.supText {
  width: 48px;
  line-height: 40px;
}
.btn {
  margin-left: 48px;
}
</style>
